<template>
<div>
    <div style="margin-top:40px"><span>水流状态</span></div>
    <div id="main2" style="margin-top:50px" :style="{ width: '500px', height: '300px'}"></div>
</div>

    <!-- <echart></echart> -->
</template>

<script>
/* import echart from '../dorm/echart/echarts1.vue' */
import * as echarts from "echarts";
export default {
name: "echart",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  comments: {
    echarts,
  },
  methods:{
      show(){

      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          textStyle:{
                    color:"white"
                }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["A区", "B区", "C区", "D区", "E区", "F区", "G区"],
            axisLabel: {
                show: true,
                textStyle:{
                    color:"white"
                }
            }
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
                show: true,
                textStyle:{
                    color:"white"
                }
            }
          }
          ,
        ],
        series: [
          {
            name: "正常",
            type: "bar",
            stack: "Ad",
            color: "#0CCF67",
            emphasis: {
              focus: "series",
            },
            data: [4, 3, 2, 1, 2, 3, 4],
          },
          {
            name: "异常",
            type: "bar",
            stack: "Ad",
            color: "red",
            emphasis: {
              focus: "series",
            },
            data: [1, 2, 3, 4, 3, 2, 1],
          },
        ],
      };
      option && myChart.setOption(option);
      }
  },
  mounted(){
      this.show();
  }
}
</script>

<style scoped>

</style>
